<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#app {
				width: 1200px;
				margin: 30px auto;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			}

			.el-header {
				margin-top: 10px;
				height: 300px;
			}

			.name {
				height: 50px;
				position: sticky;
				top: 0px;
				z-index: 999;
				background-color: white;
				border: 2px solid #F8F8FF;
				margin-top: 0px;
			}

			.title {
				width: 150px;
				height: 40px;
				margin-top: 15px;
				text-align: center;
			}

			.add-data {
				width: 150px;
				height: 40px;
				margin-top: 8px;
				margin-left: 35px;
			}

			.search {
				width: 230px;
				height: 40px;
				margin-top: 7px;
				font-size: 15px;
			}

			.search_span {
				font-size: 15px;
				padding-left: 50px;
				margin-top: 15px;
			}

			.status {
				width: 350px;
				margin-top: 7px;
				height: 40px;
				font-size: 15px;
			}

			.search-icon {
				width: 50px;
				margin-top: 15px;
				height: 40px;
				font-size: 15px;
			}

			.el-main {}

			.main_text {
				width: 1100px;
				margin: 0 auto;
			}

			.el-footer {
				height: 40px;
			}

			.page {
				width: 550px;
				margin: 15px auto;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header class="name">
					<el-row>
						<el-col :span="21">
							<div class="title">
								<h3>科研项目管理</h3>
							</div>
						</el-col>
						<el-col :span="1">
							<div class="add-data">
								<el-button type="primary" @click="tianJia">添加</el-button>
							</div>
						</el-col>
					</el-row>

				</el-header>
				<!-- 页眉 -->
				<el-header>
					<el-row>
						<el-col :span="2">
							<div class="search_span">名称：</div>
						</el-col>
						<el-col :span="8">
							<div class="search">
								<el-input v-model="search_message" placeholder="请输入关键词"></el-input>
							</div>
						</el-col>
						<el-col :span="11">
							<div class="status">
								<span>流程状态：</span>
								<el-select v-model="search_status" placeholder="请选择">
									<el-option label="审核中" value="shanghai"></el-option>
									<el-option label="审核已完成" value="beijing"></el-option>
								</el-select>
							</div>
						</el-col>
						<el-col :span="3">
							<div class="search-icon">
								<el-button type="primary" size="small" icon="el-icon-search">搜索</el-button>
							</div>
						</el-col>
					</el-row>
				</el-header>
				<!-- 正文 -->
				<el-main>
					<el-row>
						<el-col :span="24">
							<div class="main_text">
								<template>
									<el-table :data="tableData" stripe border style="width: 100%" highlight-current-row>
										<el-table-column fixed prop="tianbaoId" label="序号" width="50"></el-table-column>
										<el-table-column fixed prop="tianbaoName" label="填报人" width="80">
										</el-table-column>
										<el-table-column prop="projectName" label="名称" width="300"></el-table-column>
										<el-table-column prop="createTime" label="提交时间" width="160"></el-table-column>
										<el-table-column prop="status" label="流程状态" width="100"></el-table-column>
										<el-table-column prop="process_class" label="项目类别" width="140">
										</el-table-column>
										<el-table-column fixed="right" label="操作" width="250">
											<template slot-scope="scope">
												<el-button type="primary" size="mini" @click="xiuGai">修改</el-button>
												<el-button type="primary" size="mini" @click="shanChu(scope.row)">删除
												</el-button>
												<el-button type="primary" size="mini" @click="chaKan">查看</el-button>
											</template>
										</el-table-column>
									</el-table>
								</template>
							</div>
						</el-col>
					</el-row>

				</el-main>
				<!-- 页尾 -->
				<el-footer>
					<el-row>
						<el-col :span="24">
							<div class="page">
								<el-pagination @click="change_page(index)" 
									:page-sizes="[pageId.size]"
									:page-size="pageId.size"
									:current-page.sync="page"
									layout="total, sizes, prev, pager, next, jumper" 
									:total="pageId.total"
									@current-change="handleCurrentChange"
									background="true">
								</el-pagination>
							</div>
						</el-col>
					</el-row>
				</el-footer>
			</el-container>
		</div>
	</body>
</html>
<script>
	//3:由Vue挂载elements
	new Vue({
		el: "#app",
		data: {
			id: 4,
			search_message: "",
			search_status: "",
			page_sizes: 5,
			page: "1",
			pageId:[],
			tableData: [{
				id: '1'
			}],
			search_options: [{
				value: 'tableData.project',
			}],
			status_options: [{
				value: '选项1',
				label: '审核中',
			}, {
				value: '选项2',
				label: '审核完成',
			}],
		},
		methods: {
			search: function() {

			},
			change_page: function(index) {
				
			},
			handleCurrentChange:function(val) {
				this.page=val;
				this.findAll()
				
			},
			findAll: function() {
				
				let params = {
					"tianbaoId": "",
					"xiangmuName": "",
					"status": "",
					"page": "",
				}
				params.tianbaoId = this.id
				params.xiangmuName = this.search_message
				params.status = this.search_status
				params.page = this.page
				axios.post("http://localhost:8080/keyan/selectbycondation", params).then((res) => {
					console.log("ppppppppppppppppppppppppp")
					console.log(res)
					if(res.data.code===40010){
						if (res.data.data.length > 0) {
							this.tableData = res.data.data[0].records
							this.pageId = res.data.data[0]
						} else {
							this.$alert("没有你查询的结果，请重新输入", "提示", {
								confirmButtonText: '确定',
							})
							this.tableData = [];
						}
					}else{
						console.log('加载数据错误')
					}					
				})
			},
			shanChu: function(row) {				
				this.$confirm("确认删除该条数据吗？", "提示", {
						type: 'info'
					})
					.then(() => {
						
						axios.delete("http://localhost:8080/keyan/delete/" + row.id).then((res) => {
							console.log(res)
							if (res.data.code == 20010) {
								this.$message.info("删除成功")
							} else {
								this.$message.error("删除失败")
							}
						}).finally(() => {
							this.findAll()
						})
					}).catch(() => {
						this.$message.info("已取消删除")
					})
			},
			chaKan: function() {
				window.location = "chaKeYan.html"
			},
			tianJia: function() {
				window.location = "addKeYan.html"
			},
			xiuGai: function() {
				window.location = "updateKeYan.html"
			}
		},
		created() {
			this.findAll()
		}
	})
</script>
